/**
 * 1、准备查询参数对象

2、传递查询参数获取对应文章列表数据

3、展示到标签结构中
 */

const queryObj ={
    status:'',//审核状态
    channel_id:'',//空字符串代表显示全部页面，有id展示id文章
    page:1,
    per_page:4//获取当前页面条数，当前页面可以修改条数，每页显示数据条数

}
// 获取和展示需要多次用到，定义一个文章列表函数
async function setArticleList(){
const res  = await axios({
    url:'http://geek.itheima.net/v1_0/mp/articles',
    method:'GET',
    // 携带查询参数
    params:queryObj
})
// 实现功能：分页
let totalCount = 0;
totalCount = res.data.data.total_count


// 给标签赋值到html页面中
document.querySelector('.total-count').innerHTML = `<span class="total-count page-now">共${totalCount}条</span>`


// 监听点击行为 
document.querySelector('.next').addEventListener('click',()=>{
    // 修改页码，重新向服务器发送请求
    
    // 做判断，如果当前页面条数 小于 总条数/每一页规定条数,做向上取整
    if(queryObj.page < Math.ceil(totalCount/queryObj.per_page)){
        queryObj.page++
        document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArticleList()
    }
})
// 获取上一页，监听点击事件
document.querySelector('.last').addEventListener('click',()=>{
  if(queryObj.page>1){
    queryObj.page--
     document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
     setArticleList()
  }
})

// 检查第一个返回值
// console.log(res.data.data.results[0]);
const htmlStr = res.data.data.results.map(item=>
               `<tr>
                <td>
                  <img src="${item.cover.type===0 ?`https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500`:item.cover.images[0]}" alt="">
                </td>
                <td>${item.title}</td>
                <td>
                ${item.status ===1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
                  
                  
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id=${item.id}>
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del "></i>
                </td>
              </tr>`
).join('')
// console.log(htmlStr);
document.querySelector('.table').innerHTML = htmlStr
}

// 设置频道列表数据

async function setChannelList(){
  // 基于axios获取数据
 const res = await axios({
      url:'http://geek.itheima.net/v1_0/channels'
  })
  console.log(res);
  const htmlStr = res.data.data.channels.map(item=>
  `<option value="${item.id}" selected="">${item.name}</option>`).join('')
  // console.log(htmlStr);
  document.querySelector('.form-select').innerHTML = htmlStr
}

// 实现功能：收集筛选信息提交查询
document.querySelectorAll('.form-check-input').forEach(radio =>{
  radio.addEventListener('change',e=>{
    // console.log(e.target.value);
    queryObj.status = e.target.value
  })
})
document.querySelector('.form-select').addEventListener('change', e=>{
  console.log(e.target.value);
  queryObj.channel_id = e.target.value
})

// 实现删除功能,删除属于变化功能，需要给父元素已存在元素绑定点击事件
document.querySelector('.table').addEventListener('click',async e => {
  // 判断为删除图标
  // if(e.target.classList.contains('del')){
  //   console.log('fuck you');
  // }
  if(e.target.classList.contains('del')){
    const delId = e.target.parentNode.dataset.id
    // console.log(delId);
    
    
    //基于axios调用接口
    const res = await axios({
      url:`http://geek.itheima.net/v1_0/mp/articles/${delId}`,
      method:'DELETE',
      
    }) 
    setArticleList()
    console.log(res);

  }
})

// console.log(queryObj);
document.querySelector('.sel-btn').addEventListener('click',()=>{
  console.log(queryObj);
  setArticleList()
})





// 收集筛选和绑定事件

setArticleList()
setChannelList()